<template>
<div>
  <div id="distributionDiv"></div>
</div>
</template>

<script>
import vueEcharts from "echarts";
import 'echarts/map/js/province/shandong'
import 'echarts/map/js/province/guangdong'
import 'echarts/map/js/province/xinjiang'
import zaixian from "@/assets/images/zaixian.png";
import shangxian from "@/assets/images/shangxian.png";
import lixian from "@/assets/images/lixian.png";
import ProvinceMap from "../assets/map/provinceMap";
// 注册山东省地图
// const shandongJson = require("@/assets/map/shandong.json");
// vueEcharts.registerMap("shandong", shandongJson);
export default {
  name: "dynamicMap",
  props: ['ProvinceName'],
  data() {
    return {
      province: '广东',
      data1: [{
          name: '小组1',
          color: "#61a0a8",
          value: [116.8, 36.6]
        },
        {
          name: '小组2',
          color: "#61a0a8",
          value: [120.3, 36.3]
        },
        {
          name: '小组3',
          color: "#61a0a8",
          value: [119.1, 36.6]
        },
        {
          name: '小组4',
          color: "#61a0a8",
          value: [122.1, 37.5]
        }
      ],
      data2: [{
        name: '小组5',
        color: "#61a0a8",
        value: [121, 37.4]
      }],
      data3: [{
        name: '小组6',
        color: "#61a0a8",
        value: [115.5, 35.7]
      }]
    }
  },
  mounted() {
    this.getDistributionOptions();
  },
  methods: {

    getDistributionOptions() {
      console.log(this.ProvinceName)
      // 获取经纬度数据
      const seriesList = [{
          image: zaixian,
          data: this.data1
        },
        {
          image: shangxian,
          data: this.data2
        },
        {
          image: lixian,
          data: this.data3
        }
      ];
      // 自定义图标
      const series = seriesList.map(v => {
        return {
          type: "custom", //配置显示方式为用户自定义
          name: v.name,
          coordinateSystem: "geo", // 使用的该系列使用的坐标系 geo:地理坐标系
          itemStyle: {
            normal: {
              color: v.color
            }
          },
          renderItem(params, api) {
            //具体实现自定义图标的方法
            return {
              type: "image",
              style: {
                image: v.image,
                x: api.coord([
                  v.data[params.dataIndex].value[0],
                  v.data[params.dataIndex].value[1]
                ])[0],
                y: api.coord([
                  v.data[params.dataIndex].value[0],
                  v.data[params.dataIndex].value[1]
                ])[1],
                width: '28',
                height: "30"
              }
            };
          },
          data: v.data
        };
      });
      // options
      const distributionOptions = {
        tooltip: {
          show: true, // 鼠标移入是否触发数据
          trigger: "item", // 触发方式
          triggerOn: "click", // mousemove
          formatter: "名称:{b}<br />坐标:{c}"
        },
        series,
        geo: {
          //引入山东省的地图
          map: this.ProvinceName,
          layoutCenter: ["50%", "50%"], //设置后left/right/top/bottom等属性无效
          layoutSize: "90%",
          roam: false, //关闭鼠标缩放和拖动
          zoom: 1,
          label: {
            normal: {
              // 静态的时候展示样式
              show: true, //是否显示地图省份得名称
              textStyle: {
                position: ['50%', '50%'],
                color: "#999999",
                // fontSize: 10,
                fontFamily: "Arial",

              }
            },
            emphasis: {
              show: true,
              //动态展示的样式
              color: "#fff"
            }
          },
          itemStyle: {
            // 设置地图块的相关显示信息
            normal: {
              areaColor: "#DDEFFB",
              borderColor: "#A2BCC4",
              borderWidth: 1,
              textStyle: {
                color: "#fff"
              },
              // 地图块凸起
              // shadowBlur: 10,
              // shadowOffsetX: 10
              left: "5%",
              right: "5%",
              top: "5%",
              bottom: "5%"
            },
            emphasis: {
              areaColor: "#feb6aa", // hover效果
              color: "#fff"
            }
          }
        }
      };
      var myChart = vueEcharts.init(document.getElementById("distributionDiv"));
      myChart.setOption(distributionOptions);
      myChart.on("click", function (params) {
        console.log("获取当前市区：", params); //此处写点击事件内容
      }); //点击事件，此事件还可以用到柱状图等其他地图
      window.onresize = function () {
        myChart.resize();
      };
    }
  }
};
</script>

<style scoped>
#distributionDiv {
  width: 100%;
  height: 900px;
}
</style>
